import React from 'react'
import './index.scss'
import { useNavigate } from 'react-router-dom';

// import { withRouter } from 'react-router-dom/cjs/react-router-dom.min'
const TagList = (props) => {

    const navigate = useNavigate()


    const gototitle = (id) => {
        navigate('/title/' + id)
    }
    const { taglist } = props

    // const list = taglist.showPrdList
    // const newList = list.splice(0, 6)
    const url = 'https://hshop.honorfile.com/pimages/cnqx'

    return <div className='tag'>
        {taglist.map((item, index) => <div key={index}>
            <div className='titletag flex'>
                <div className='item-na'>
                    <span className='na'>{item.name}</span>
                    <span className='na1'>{item.displayDescription}
                    </span>
                </div>
                <div className='more'>更多＞</div>
            </div>
            <div className="nav3 flex">
                {item.showPrdList.slice(0, 6).map((i, ind) =>
                    // <Link to={'title/' + i.prdId}> 
                    <div className='nav3-item' key={1 - ind}
                        onClick={gototitle.bind(this, i.prdId)}
                    >
                        <img src={url + i.photoPath + '800_800_' + i.photoName} alt="" />
                        <span className='name'>{i.prdName}</span>
                        <span className='price'>￥{i.prdCurrentPrice}</span>
                    </div>

                )}

            </div> </div>)
        }


    </div>
}

export default TagList